<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>



<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 显示标题，图例和空的坐标轴
        myChart.setOption({
          title: {
            text: '规上服务业分行业营收增速'
          },
          tooltip: {},
          legend: {
            data: ['营收增速']
          },
          xAxis: {
            data: []
          },
          yAxis: {},
          series: [
            {
              name: '增速',
              type: 'line',
              data: []
            }
          ]
        });

        // 异步加载数据
        $.get('../static/js/data2.json', function(data) {
          // 填入数据
          myChart.setOption({
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  crossStyle: {
                    color: '#999'
                  }
                }
              },
              toolbox: {
                feature: {
                  dataView: { show: true, readOnly: false },
                  magicType: { show: true, type: ['line', 'bar'] },
                  restore: { show: true },
                  saveAsImage: { show: true }
                }
              },
              legend: {
                data: ['本期营收', '上期营收', '营收增速']
              },
              xAxis: [
                {
                  type: 'category',
                  data: data['门类名称'],
                  axisPointer: {
                    type: 'shadow'
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  name: '营收',
                  min: 0,
                  max: 25000000,
                  interval: 10000000,
                  axisLabel: {
                    formatter: '{value}'
                  }
                },
                {
                  type: 'value',
                  name: '营收增速',
                  min: 0,
                  max: 125,
                  interval: 20,
                  axisLabel: {
                    formatter: '{value} %'
                  }
                }
              ],
              series: [
                {
                  name: '本期营收',
                  type: 'bar',
                  tooltip: {
                    valueFormatter: function (value) {
                      return value + ' 千元';
                    }
                  },
                  data:data['本期营收']
                },
                {
                  name: '上期营收',
                  type: 'bar',
                  tooltip: {
                    valueFormatter: function (value) {
                      return value + '千元';
                    }
                  },
                  data: data['上期营收']
                },
                {
                  name: '营收增速',
                  type: 'line',
                  yAxisIndex: 1,
                  tooltip: {
                    valueFormatter: function (value) {
                      return value + ' %';
                    }
                  },
                  data: data['营收增速']
                }
              ]
            })
        },'json');

        // 使用刚指定的配置项和数据显示图表。
        //myChart.setOption(option);
    myChart.on('click', function(params) {
  window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name))});
    </script>
</body>
</html>